<template>
    <!-- 签约管理 * 待签约列表 -->
    <div>
        <div class="lhy_publish_top_One">
            <!-- 第一行 - 签约  -->
            <div style="border-bottom:1px dashed #efefef ;" class="lhy_One">
                <div class="display">
                    <b class="lhy_b">签约状态</b>
                    <el-select style="margin-right:15px; width: 170px; " v-model="value" class="m-2"
                        placeholder="请选择签约状态">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="display">
                    <b class="lhy_b">签约机构</b>
                    <el-select style="margin-right:15px; width: 170px; " v-model="value" class="m-2"
                        placeholder="请选择签约机构">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="display">
                    <b class="lhy_b">医生团队</b>
                    <el-select style="margin-right:15px; width: 170px; " v-model="value" class="m-2"
                        placeholder="请选择医生团队">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="display">
                    <b class="lhy_b">服务包</b>
                    <el-select style="margin-right:15px; width: 170px;" v-model="value" class="m-2"
                        placeholder="请选择服务包">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
            </div>
            <!-- 第二行 - 选择日期 -->
            <div class="lhy_One">
                <b class="lhy_b">选择日期</b>
                <div class="display">
                    <el-select style="margin-right:15px; width: 430px;" v-model="value" class="m-2" placeholder="请选择时间">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="display">
                    <el-button type="primary">查询</el-button>
                    <el-button>导出</el-button>
                </div>
            </div>
            <el-table ref="multipleTableRef" :data="tableData.slice((pages-1)*pageSize,pages*pageSize)"
                style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="编号" width="120">
                    <template #default="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column property="name" label="签约人姓名" width="120" />
                <el-table-column property="IDnumber" label="身份证号" show-overflow-tooltip />
                <el-table-column property="name" label="手机号" width="120" />

                <el-table-column property="doctor" label="签约医生团队" width="120" />

                <el-table-column property="serve" label="签约服务包" width="120" />

                <el-table-column property="state" label="签约状态" width="120">
                    <template #default="scope">
                        <el-tag v-if="scope.row.state" type="success">已签约</el-tag>
                        <el-tag v-else type="danger">未签约</el-tag>
                    </template>
                </el-table-column>

                <el-table-column property="date" label="申请时间" width="120" />

                <el-table-column label="操作" width="120">
                    <a style="margin-right: 10px;">查询详情</a>
                    <a>编辑</a>
                </el-table-column>
            </el-table>
            <div style="margin-top: 15px;">
                <el-pagination @update:current-page="changePage" v-model:current-page="page" background :page-size="pageSize"
                layout="prev, pager, next" :total="tableData.length" />
            </div>
            


        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'
    import { ElTable } from 'element-plus'



    const multipleTableRef = ref()
    const multipleSelection = ref([])

    const handleSelectionChange = (val) => {
        multipleSelection.value = val
    }
    // 定义总数据
    const tableData = [
        {
            id: '1',
            name: 'Tom111',
            IDnumber: '123456789987654321',
            mobile: "123456789123",
            doctor: "张三医生",
            serve: "老年人服务包",
            state: true,
            date: "2020-10-29",
        },
        {
            id: '2',
            name: 'Tom222',
            IDnumber: '123456789987654321',
            mobile: "123456789123",
            doctor: "张三医生",
            serve: "老年人服务包",
            state: true,
            date: "2020-10-29",
        },
        {
            id: '3',
            name: 'Tom333',
            IDnumber: '123456789987654321',
            mobile: "123456789123",
            doctor: "张三医生",
            serve: "老年人服务包",
            state: true,
            date: "2020-10-29",
        },
        {
            id: '4',
            name: 'Tom444',
            IDnumber: '123456789987654321',
            mobile: "123456789123",
            doctor: "张三医生",
            serve: "老年人服务包",
            state: true,
            date: "2020-10-29",
        },
        {
            id: '5',
            name: 'Tom555',
            IDnumber: '123456789987654321',
            mobile: "123456789123",
            doctor: "张三医生",
            serve: "老年人服务包",
            state: true,
            date: "2020-10-29",
        },
        {
            id: '6',
            name: 'Tom666',
            IDnumber: '123456789987654321',
            mobile: "123456789123",
            doctor: "张三医生",
            serve: "老年人服务包",
            state: true,
            date: "2020-10-29",
        },
        {
            id: '7',
            name: 'Tom777',
            IDnumber: '123456789987654321',
            mobile: "123456789123",
            doctor: "张三医生",
            serve: "老年人服务包",
            state: true,
            date: "2020-10-29",
        },
        {
            id: '8',
            name: 'Tom888',
            IDnumber: '123456789987654321',
            mobile: "123456789123",
            doctor: "张三医生",
            serve: "老年人服务包",
            state: true,
            date: "2020-10-29",
        },
        {
            id: '9',
            name: 'Tom999',
            IDnumber: '123456789987654321',
            mobile: "123456789123",
            doctor: "张三医生",
            serve: "老年人服务包",
            state: true,
            date: "2020-10-29",
        },
        {
            id: '10',
            name: 'Tom1010',
            IDnumber: '123456789987654321',
            mobile: "123456789123",
            doctor: "张三医生",
            serve: "老年人服务包",
            state: true,
            date: "2020-10-29",
        },
        {
            id: '11',
            name: 'Tom11111',
            IDnumber: '123456789987654321',
            mobile: "123456789123",
            doctor: "张三医生",
            serve: "老年人服务包",
            state: true,
            date: "2020-10-29",
        },
    ]

    // 当前页
    const pages = ref(1)
    // 每页显示条数
    const pageSize = 5
    // 更改页数
    let changePage = (page) => {
        console.log(page);
        pages.value = page
        console.log(pages);
    }


</script>

<style lang="scss" scoped>
    .display {
        display: inline-block;
    }

    /* 发布单位的最外层框 */
    .lhy_publish_top {
        margin-top: 6px;
        width: 100%;
        background-color: #f0f0f0;
        height: 75vh;
        z-index: 100;
        text-align: center;
    }

    /* 发布单位 - 发布单位行 */
    .lhy_publish_top_One {
        text-align: left;
        width: 95%;
        /* padding: 15px; */
        background-color: white;
        margin-top: 25px;
        display: inline-block;
    }

    .lhy_b {
        margin-right: 20px;
    }

    .span {
        padding: 5px 20px;
        font-weight: 550;
        color: #6e6e6e;

    }

    .lhy_One {
        padding: 18px 0;
        margin: 0 25px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>